<template>

	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title">
						<text class="title-txt">装车统计</text>
					</view>
				</template>
				<up-subsection :list="[{name:'吨数'},{name:'车数'}]" :current="current" mode="subsection"
					@change="(i)=>{current=i;fn2()}"></up-subsection>
				<view class="title p-b-10 fw flex m-t-10">
					<image :src="getImgUrl('index/chejian.png')" mode="widthFix" style="width:28rpx" />
					一车间
				</view>
				<my-grid :list="list1" :decimals="current == 0 ? 2 : 0" :col="3" :key="`一车间${current}`"></my-grid>
				<view class="title p-y-10 fw flex">
					<image :src="getImgUrl('index/chejian.png')" mode="widthFix" style="width:28rpx" />
					二车间
				</view>
				<my-grid :list="list2" :decimals="current == 0 ? 2 : 0" :col="3" :key="`二车间${current}`"></my-grid>
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">装车点视频监控</text></view>
				</template>
				<my-play-video-list :list="['08562826bb0c4971b1d992aa6357f0a3',
							'17bf08ee88fe48269391dd021d828ad9',
							'5e352fe84d854ab1a54a5455e326cd20',
							'65052110401320005025',
							'65052110401320005038',
							'65052110401320005039',
							'65052110401320005331',
							'65052110401320005436',
							'65052110401320005534',
							'92f8e962ccd34d97912b4d184a38adf8',
							'ca72fa76c2a74675a1ea8297a0d85726',
							'de6632a53d2c4250867f40e5a53538ee']" @DataQuery="()=>collapse.init()" />
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">料口信息</text></view>
				</template>
				<my-scroll style="height: 300px;">
					<my-table :columns="columns" :data="tableData" />
				</my-scroll>
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">煤仓实时容量</text></view>
				</template>
				<my-grid :list="list3" :decimals="2" :col="1" type="lr" />
			</u-collapse-item>
		</u-collapse>
		<up-back-top :scroll-top="scrollTop"></up-back-top>
	</view>
</template>

<script setup>
	/**************************************返回顶部*************************************************/
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	/**************************************请求数据逻辑*************************************************/
	import {
		getApiFabric
	} from '@/api/customApi'
	const showMoreKeys = ref([1, 2, 3, 4]),
		collapse = ref(null)

	/*******************************************料口信息******************************************/
	const tableData = ref([]),
		columns = [{
			prop: '车间',
			label: '车间',
			width: 60,
		}, {
			prop: '料口名称',
			label: '料口名称',
			width: 90,
		}, {
			prop: '排队车数',
			label: '排队车数',
			width: 90,
		}, {
			prop: '料口状态',
			label: '料口状态',
			width: 90,
		}]

	function fn1() {
		getApiFabric({
			apiCode: "e30aed69-8e20-4097-a8f8-1be273b9a0d7",
			propertyMapping: {
				车间: "workshop",
				料口名称: "feedport",
				排队车数: "material",
				料口状态: "state"
			}
		}).then((res) => {
			tableData.value = res.data
			nextTick(() => {
				collapse.value.init()
			})
		})
	}

	/**********************************************************************装车统计***********************************/
	let current = ref(0),
		list1 = computed({
			get() {
				const unit = current.value == 0 ? '万吨' : '车次';
				return [{
					key: '一车间日生产',
					title: '日装车',
					value: '0',
					unit,
				}, {
					key: '一车间月生产',
					title: '月装车',
					value: '0',
					unit,
				}, {
					key: '一车间年生产',
					title: '年装车',
					value: '0',
					unit,
				}]
			},
			set() {}
		}),
		list2 = computed({
			get() {
				const unit = current.value == 0 ? '万吨' : '车次'
				return [{
					key: '二车间日生产',
					title: '日装车',
					value: '0',
					unit,
				}, {
					key: '二车间月生产',
					title: '月装车',
					value: '0',
					unit,
				}, {
					key: '二车间年生产',
					title: '年装车',
					value: '0',
					unit,
				}]
			},
			set() {}
		});

	function fn2() {

		// getByApiCode({
		// 	apiCode: "dimianshengchanxitongshengchanliang",
		// 	propertyMapping: {
		// 		key: 's',
		// 		val: 'y'
		// 	}
		// }).then(res => {
		// 	const data = ArrayToObj(res.data)
		// 	list1.value.forEach(item => {
		// 		item.value = data[item.key] || 0
		// 	})
		// })
		// getByApiCode({
		// 	apiCode: "shengchanliangerchejiantongji",
		// 	propertyMapping: {
		// 		key: 's',
		// 		val: 'y'
		// 	}
		// }).then(res => {
		// 	const data = ArrayToObj(res.data)
		// 	list2.value.forEach(item => {
		// 		item.value = data[item.key] || 0
		// 	})
		// })
	}
	/**********************************************************************煤仓实时容量***********************************/
	let list3 = ref([{
		key: '1车间装车站1#仓',
		title: '1车间1号仓',
		value: '0',
		unit: '吨',
	}, {
		key: '1车间装车站2#仓',
		title: '1车间2号仓',
		value: '0',
		unit: '吨'
	}, {
		key: '二车间装车站-煤仓容量1',
		title: '2车间1号仓',
		value: '0',
		unit: '吨'
	}, {
		key: '二车间装车站-煤仓容量2',
		title: '2车间2号仓',
		value: '0',
		unit: '吨'
	}, {
		key: '二车间装车站-煤仓容量3',
		title: '2车间3号仓',
		value: '0',
		unit: '吨'
	}, {
		key: '二车间装车站-煤仓容量4',
		title: '2车间4号仓',
		value: '0',
		unit: '吨'
	}, {
		key: '二车间装车站-煤仓容量5',
		title: '2车间5号仓',
		value: '0',
		unit: '吨'
	}, {
		key: '二车间装车站-煤仓容量6',
		title: '2车间6号仓',
		value: '0',
		unit: '吨'
	}])

	function fn3() {
		getApiFabric({
			apiCode: "12daf43b-bf7b-4898-b472-f0ff52eb169b",
			propertyMapping: {
				key: 'name',
				val: 'value'
			}
		}).then(res => {
			const data = ArrayToObj(res.data)
			list3.value.forEach(item => {
				item.value = data[item.key] || 0
			})
		})
	}

	function getServerData(refresh) {
		Promise.all([fn1(), fn3()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>

<style scoped lang="scss">
	.video {
		width: 100%;
		height: 200rpx;
	}
</style>